<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title></title>
</head>

<body>
	<style>
		#userEditForm .form-item{margin-bottom: 20px;}
		#userEditForm .form-item>label{min-width: 72px; display: inline-block; text-align: right;}
	</style>
	<div class="super-theme-example">
		<div class="options-toolbar">
			<div class="top-options">
				<a href="javascript:void(0)" class="easyui-linkbutton info" data-options="iconCls:'fa fa-plus'" onclick="user.methods.addUser()">新建</a>				
			</div>
		</div>
		<table id="user-datagrid"></table>
		<div id="userEditWin" class="easyui-window" title="角色" style="width:500px; height: 300px;" data-options="modal:true,closed:true,minimizable:false,maximizable:false">
			<div class="super-theme-example">
				<form id="userEditForm">
					<input type="hidden" name="id">
					<div class="form-item">
		                <label for="" class="label-top">用户名：</label>
		                <input name="username" class="easyui-textbox" style="width: 350px;" prompt="名称...">
		            </div>
		            <div class="form-item">
		                <label for="" class="label-top">密码：</label>
		                <input name="password" class="easyui-passwordbox" style="width: 350px;" prompt="值...">
					</div>
					<div class="form-item">
						<label for="" class="label-top">角色：</label>
						<input id="userCharacterCombo" style="width: 350px;">
					</div>
				</form>
				<div style="text-align: right; box-sizing: border-box;padding: 10px;">
					<a href="#" class="easyui-linkbutton" style="width: 80px;" onclick="$('#userEditWin').window('close');">取消</a>
					<a href="#" class="easyui-linkbutton primary" style="width: 80px;" onclick="user.methods.editSubimt();">保存</a>
				</div>
			</div>
		</div>
	</div>
	<script type="text/javascript">
		
		var user = {
			data: {
                permissionTypeList: [], // 权限列表
                characterList: [] // 角色列表
			},
			methods: {
                initDatagrid : function(){
					$('#user-datagrid').datagrid({
						height: $(document).height() - 200,
					    url: commonConfig.mgUrlPrefix() + '/uaa/user/lists',
					    pagination: true,
					    pageSize: 50,
					    pageList : [50, 100, 200, 500],
					    columns:[[
							{field:'username',title:'用户名',width:100,align:'center'},
							{field:'roleNames',title:'角色',width:100,align:'center',formatter: function(value,row,index){
								value = value || '' ;
								var list = value.split(',');
								var html = '';
								for (const i in list) {
									html += '<span class="role-span">'+list[i]+'</span>';
								}
								return html;
							}},
							{field:'options',title:'操作',width:180,align:'center', formatter: function(value,row,index){
								return '<div class="row-edit-group">' +
									        '<a onclick="user.methods.editUser(' + index + ')">编辑</a>' +
									        '<a onclick="user.methods.resetUserPass(' + index + ')">重置密码</a>' +
									        '<a onclick="user.methods.deleteUser(' + index + ')">删除</a>' + 
									   '</div>';
							}}
					    ]]
					});
				},
				initUserCharacterCombo: function(selects){
					$('#userCharacterCombo').combobox({
						url: commonConfig.mgUrlPrefix() + '/uaa/role',
						valueField: 'id',
                        textField: 'name',
                        multiple: true, // 多选
                        onLoadSuccess: function(){
                        	$('#userCharacterCombo').combobox('clear');
                        	if(selects && selects.length > 0){
                        		$.each(selects, function(index , _select) {
                        			$('#userCharacterCombo').combobox('select' , _select);
                        		});
                        	}
                        }
                    })
				},
				addUser: function(){
                	$('#userEditForm div.form-item').show();
                	user.methods.initUserCharacterCombo();
                	$('#userEditWin').window('open');
                	$('#userEditForm').form('clear');
                },
				editUser: function(index){
                	$('#userEditForm').form('clear');
                	var _row = $('#user-datagrid').datagrid('getRows')[index];
                	requestServer(commonConfig.mgUrlPrefix() + '/uaa/user/' + _row.id, 'GET').then((response) => {
						if (response.code == 1) {
							$('#userEditForm').form('load' , {id: _row.id , username: _row.username});
							$('#userEditForm div.form-item').eq(1).hide();
							
							var selects = [] ; 
							if(response.datas.roles && response.datas.roles.length > 0){
								$.each(response.datas.roles , function(index, _role){
									selects.push(_role.id);
								});
							}
							user.methods.initUserCharacterCombo(selects);
							$('#userEditWin').window('open');
						}else {
							$.messager.alert('提示',response.message,'error');
						}
					}).catch((error) => {
						console.log(error)
					});
				},
				editSubimt: function(){
					
					var isEdit = $('#userEditForm div.form-item').eq(1).css('display') == 'none' ; 
					
					var _params = $('#userEditForm').serializeJson();
					var roleIds = $('#userCharacterCombo').combobox('getValues');
					if(_params.username.trim() == ''){
						$.messager.alert('提示', '用户名不能为空','error');
						return false
					}
					if(!isEdit && _params.password.trim() == ''){
						$.messager.alert('提示', '密码不能为空','error');
						return false
					}
					if(!roleIds || roleIds.length == 0){
						$.messager.alert('提示', '角色不能为空','error');
						return false
					}
					var roles = [] ; 
					$.each(roleIds, function(index, roleId) {
						roles.push({id: roleId});
					});
					_params.roles = roles;
					requestBodyServer(commonConfig.mgUrlPrefix() + '/uaa/user' , (isEdit ? 'PUT' :'POST'), _params).then((response) => {
						if (response.code == 1) {
							showMessage('<i class="fa fa-info-circle"></i>&nbsp; 请求成功...');
							$('#userEditWin').window('close');
							$('#user-datagrid').datagrid('reload');
						}else {
							$.messager.alert('提示',response.message,'error');
						}
					}).catch((error) => {
						console.log(error)
					});
				},
				deleteUser: function(index){
					$.messager.confirm('提示', '确定取消?', function(r){
						if(r){
							var _row = $('#user-datagrid').datagrid('getRows')[index];
							requestServer(commonConfig.mgUrlPrefix() + '/uaa/user/'+_row.id , 'DELETE').then((response) => {
								if (response.code == 1) {
									showMessage('<i class="fa fa-info-circle"></i>&nbsp; 请求成功...');
									$('#user-datagrid').datagrid('reload');
								}else {
									$.messager.alert('提示',response.message,'error');
								}
							}).catch((error) => {
								console.log(error)
							});
						}
					});
				},
				resetUserPass: function(index){
					$.messager.confirm('提示', '确认重置', function(r){
						if (r){
							var _row = $('#user-datagrid').datagrid('getRows')[index];
							requestServer(commonConfig.mgUrlPrefix() + '/uaa/user/crypto/reset/'+_row.id , 'PUT').then((response) => {
								if (response.code == 1) {
									showMessage('<i class="fa fa-info-circle"></i>&nbsp; 请求成功...');
									$('#user-datagrid').datagrid('reload');
								}else {
									$.messager.alert('提示',response.message,'error');
								}
							}).catch((error) => {
								console.log(error)
							});
						}else{
							$.messager.alert('提示', '密码不存在,操作未完成','warning');
						}
					});
				}
			},
			init: function () {
				user.methods.initDatagrid();
			}
		}
		$(function () {
			user.init()
		})
	</script>
</body>

</html>